<%@page import="nl.hva.web.mvcwebapp.controllers.UserController"%>
<%@include file="/WEB-INF/templates/configuration.jsp" %>
<%-- 
    Document   : user_profile-body
    Created on : 16-Nov-2012, 16:53:07
    Author     : Roald
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="windows-1252"%>
<!DOCTYPE html>
<style type="text/css">



</style>
<script>
    $(document).ready(function(){
        var show=0;
        $(".chapterbutton").click(function(){
            if(show == 0){
                $(".chapters").hide();
                show=1;
            }else{
                $(".chapters").show();
                show=0;
            }
            return false;
        });
    });            
</script>
<h1 class="course-header left" style="">Course: ${course.coursetitle}</h1><a class="left icon edit" title="edit" href="edit?id=${course.courseid}" class="edit">edit</a>
<br class="clearfix"/>
<hr />
<div class="wrapper-course">
    <div class="left">
        <img class="course-picture" src="${course.coursepicture}"></img>
    </div>
    <div class="left course-description" style="">
        <h2><b>Teacher: ${Headteacher}</b></h2>
        <p>${course.coursedescription}</p>
    </div>
</div>
<div class="course-progress">
    <h3>Course Progress</h3>
    <div class="progress-bar">
        <div class="progress-bar-status center" style="color: white; width:${progress*2-10}px">${progress}%</div>
    </div>
    <a  href="${url}course/enroll?courseid=${course.courseid}">enroll</a>
    <hr />
</div>
<div class="navigation-course">
    <div class="left" style="margin-right: 85px">
        <a href="#"><img class="chapterbutton" width="100px" height="100px" src="${imgurl}book-icon-course.png"></img></a>
        <p>Chapters</p>
    </div>
    <div class="left" style="margin-right:85px">
        <a href="${url}course/chapters?courseid=${course.courseid}"><img width="100px" height="100px" src="${imgurl}grade-icon-course.png"></img></a>
        <p>Grades</p>
    </div>
    <div class="left" >
        <a href="${url}forum/topic_view?courseid=${course.courseid}"><img width="100px" height="100px" src="${imgurl}forum-icon.png"></img></a>
        <p>Forum</p>
    </div>
    <br class="clearfix">
</div>
<hr />
<p>
    <a class="button" href="${url}course/chapters?courseid=${course.courseid}">See the chapters!</a>
</p>
<div class="chapters">
    <h2>Chapters</h2>
    <table class="zebra">
        <thead>
        <th style="width:25px;"></th>
        <th style="width:150px;"><strong>Title</strong></th>
        <th style="width:200px;"><strong>Description</strong></th>
        <th style="width:20px;"></th>
        </thead>
        <tbody>
            <c:forEach var="tempChapter" items="${chapters}">
                <tr>
                    <td class="completed"></td>
                    <td><a href="${url}chapter/view?chapterid=${tempChapter.chapterid}">${tempChapter.chapterName}</a></td>
                    <td>${tempChapter.chapterdescription}</td>
                    <td><a class="icon view" title="view" href="${url}chapter/view?chapterid=${tempChapter.chapterid}">view</a></td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
    <p>
        <a class="button" href="${url}course/livestream">Watch the livestream of this course!</a>
    </p>
    <form id="cursusGebruiker" action="enroll" method="post">
        <p>  
            <% if (UserController.userAccountType == 0) {%>
        <td><label for="toEnroll">You need to log in to enroll for a course!</label></td>
        <%}%>
        <% if (UserController.userAccountType == 1) {%>
        <a class="button" href="${url}course/livestream?courseid=${course.courseid}">Enroll for this course!</a>
        <%}%>
        </p>
    </form>
</div>


